import React, { Component, ReactNode } from 'react';
import { Modal } from 'antd';
import { ObjectType } from '@/pages/riskControl/utils';

interface ModalConfig {
  title: string;
  afterClose: () => void;
  bodyStyle: ObjectType;
  cancelText: string;
  okText: string;
  okType: string;
  okButtonProps: ObjectType;
  cancelButtonProps: ObjectType;
  onCancel: () => void;
  onOk: () => void;
  centered: boolean;
  mask: boolean;
  closable: boolean;
  closeIcon: ReactNode;
  destroyOnClose: () => void;
  maskStyle: ObjectType;
  maskClosable: boolean;
  width: number;
  wrapClassName: string | ObjectType;
  content: ReactNode;
}

class CommonModal extends Component<ObjectType, ObjectType> {
  constructor(props: ObjectType) {
    super(props);
    this.state = {
      data: {},
    };
  }

  static getDerivedStateFromProps(nextProps: ObjectType) {
    // 对比show 和 createModal 对同一个属性的不同传参数的取舍。相同的参数以show的时候传的为主
    const { modalData, argusObj } = nextProps;
    const nowData = {};
    // eslint-disable-next-line no-restricted-syntax
    for (const attr in modalData) {
      if (Object.prototype.hasOwnProperty.call(modalData, attr)) {
        // eslint-disable-next-line no-restricted-syntax
        for (const attr1 in argusObj) {
          if (Object.prototype.hasOwnProperty.call(argusObj, attr1)) {
            if (attr === attr1) {
              if (modalData.hasOwnProperty(attr) && argusObj.hasOwnProperty(attr)) {
                if (attr === 'okButtonProps') {
                  const okButtonProps = Object.assign({}, nowData[attr]);
                  nowData[attr] = Object.assign(okButtonProps, argusObj[attr]);
                }
                nowData[attr] = modalData[attr];
              } else if (modalData.hasOwnProperty(attr)) {
                nowData[attr] = modalData[attr];
              } else if (argusObj.hasOwnProperty(attr1)) nowData[attr] = argusObj[attr1];
            }
          }
        }
      }
    }
    return {
      data: nowData,
    };
  }

  render() {
    // console.log(this.state.data)
    return (
      <Modal {...this.state.data} {...this.props}>
        {this.state.data.content}
      </Modal>
    );
  }
}
export default function createModal(
  id: string,
  {
    title, // 标题
    afterClose, // Modal 完全关闭后的回调
    bodyStyle,
    cancelText = '取消',
    okText = '确定',
    okType = 'primary', // primary
    okButtonProps, // ok 按钮 props
    cancelButtonProps, // cancel 按钮 props
    onCancel, // 点击遮罩层或右上角叉或取消按钮的回调
    onOk, // 点击确定回调
    centered = true, // 垂直居中展示 Modal
    mask = true, // 是否展示遮罩
    closable = true, // 是否显示右上角的关闭按钮
    closeIcon, // 自定义关闭图标
    destroyOnClose, // 关闭时销毁 Modal 里的子元素
    maskStyle, // 遮罩样式
    maskClosable = false, // maskClosable
    width,
    wrapClassName, // 对话框外层容器的类名
    content,
  }: ModalConfig,
): ReactNode {
  const argusObj = {
    title,
    afterClose,
    bodyStyle,
    cancelText,
    okText,
    okType,
    okButtonProps,
    cancelButtonProps,
    onCancel,
    onOk,
    centered,
    mask,
    closable,
    closeIcon,
    destroyOnClose,
    maskStyle,
    maskClosable,
    width,
    wrapClassName,
    content,
  };

  // console.log('argusObj',argusObj)
  // @ts-ignore
  // eslint-disable-next-line react/no-this-in-sfc
  if (!this.state.modal.hasOwnProperty(id)) {
    // @ts-ignore
    // eslint-disable-next-line react/no-this-in-sfc
    this.state.modal[id] = argusObj;
  }
  // @ts-ignore
  // eslint-disable-next-line react/no-this-in-sfc
  const modalData = this.state.modal[id];
  if (!modalData) {
    return null;
  }
  if (!modalData.update) {
    modalData.content = content;
  }

  // 关闭模态框销毁modal
  const close = () => {
    modalData.showModal = false;
    // @ts-ignore
    // eslint-disable-next-line react/no-this-in-sfc
    this.setState({
      // @ts-ignore
      // eslint-disable-next-line react/no-access-state-in-setstate,react/no-this-in-sfc
      modal: this.state.modal,
    });
  };

  /* 取消按钮事件 */
  const onCancelHandle = () => {
    if (typeof modalData.onCancel === 'function') modalData.onCancel();
    close();
  };

  // 确认按钮事件
  const onOkHandle = () => {
    if (typeof modalData.onOk === 'function') modalData.onOk();
    close();
  };

  return (
    <CommonModal
      close={close}
      onCancel={onCancelHandle}
      onOk={onOkHandle}
      modalData={modalData}
      argusObj={argusObj}
      visible={modalData.showModal}
    />
  );
}
